<!DOCTYPE html>
<html lang="zh">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>emailsender</title>
    <script src="./javascript/jQuery.js"></script>
    <script src="./javascript/compiled.js"></script>
    <script src="./javascript/emailsender.js"></script>
    <script src="./javascript/email.js"></script>
    <script>
        $(document).ready(function Getdateforinput() {
            var now = new Date();
            var day = ("0" + now.getDate()).slice(-2);
            var month = ("0" + (now.getMonth() + 1)).slice(-2);
            var today = now.getFullYear() + "-" + (month) + "-" + (day);
            $('#time_board').val(today);
        });
        //表单时间获取函数
        function Getdateforinput() {
            var now = new Date();
            var day = ("0" + now.getDate()).slice(-2);
            var month = ("0" + (now.getMonth() + 1)).slice(-2);
            var today = now.getFullYear() + "-" + (month) + "-" + (day);
            $('#time_board').val(today);
        }

        function resetForm() {
            document.getElementById("reset").reset();
            Getdateforinput();
        }

        window.onload = function () {
            const bottom = document.querySelector(".nav-bottom");
            const navMenu = document.querySelector(".nav-menu");

            bottom.addEventListener("click", mobileMenu);

            function mobileMenu() {
                bottom.classList.toggle("active");
                navMenu.classList.toggle("active");
            }
        }
    </script>
    <link href="./css/emailsender.css" rel="stylesheet" type="text/css" />
    <link href="./css/nav.css" rel="stylesheet" type="text/css">
    <link href="./css/style_of_index.css" rel="stylesheet" type="text/css">
</head>

<body>
    <header class="header">
        <nav class="navbar">
            <a href="index.html" class="nav-logo">SpaceEye</a>
            <ul class="nav-menu">
                <li class="nav-item">
                    <a href="history.html" class="nav-link">航天历史</a>
                </li>
                <li class="nav-item">
                    <a href="human.html" class="nav-link">重要人物</a>
                </li>
                <li class="nav-item">
                    <a href="News.html" class="nav-link">近期资讯</a>
                </li>
                <li class="nav-item">
                    <a href="aircraft.html" class="nav-link">航天器展示</a>
                </li>
                <li class="nav-item">
                    <a href="emailsender.html" class="nav-link">太空漂流瓶</a>
                </li>
                <li></li>
            </ul>
            <div class="nav-bottom">
                <span class="bar"></span>
                <span class="bar"></span>
                <span class="bar"></span>
            </div>
        </nav>
    </header>

    <div class="page-container">
        <div class="screen screen-1">
            <div class="nav-bar ">
                <div class="nav-container">
                    <span class="navbar-brand"><a href="index.html"
                            style="color: rgb(255, 255, 255);font-size: larger;">太空漂流瓶</a></span>
                </div>
            </div>
            <div class="flyText">
                <div class="index">
                    <div class="container">
                        <img src="./soures/images/space-drifter.png" style="max-width:none;">
                    </div>
                </div>
            </div>
            <div style="color:aliceblue; font-size:24px; display:block; bottom:0; padding-top: 390px;">
                在宏大的宇宙以及永不停息的时间面前，人类显得脆弱而渺小<br>
                而避免陷入对虚无的恐惧的最好方式便是--与自我对话<br>
                因此，你不妨将你现在对于未来的设想，或者你的痛苦迷茫<br>
                都写在一份跨越时间的信件里，相信你会与时间和解<br>
                时间也会给予你力量
            </div>
            <div class="jump-buttom" onclick="$('html,body').animate({ scrollTop: $('#screen-2').offset().top }, 400)">
                <p style="color:aliceblue;font-family:'pixel-text'">打开</p>
                <img src="./soures/images/down.png" style="margin: 0 auto">
            </div>
        </div>

        <div class="screen screen-2" id="screen-2">
            <div class="nav-bar ">
                <div class="nav-container">
                    <span class="navbar-brand"><a href="index.html"
                            style="color: rgb(255, 255, 255);font-size: larger;">太空漂流瓶</a></span>
                </div>
            </div>
            <div class="type-out-container">
                <p class="type-out-1" id="t1">宇宙无垠,时空无穷尽</p>
                <p class="type-out-2" id="t2">作为独立个体，我们与</p>
                <p class="type-out-3" id="t3">虚无对抗的唯一方式便</p>
                <p class="type-out-4" id="t4">是与时间和解，所以为</p>
                <p class="type-out-5" id="t5">什么不跨越时间，与未</p>
                <p class="type-out-6" id="t6">来的自己交谈呢？</p>
            </div>

        </div>

        <div class="screen screen-3" id="screen-3">
            <div class="nav-bar nav-bar-background">
                <div class="nav-container">
                    <span class="navbar-brand"><a href="index.html"
                            style="color: rgb(255, 255, 255);font-size: larger;font-family:'pixel-text'">太空漂流瓶</a></span>
                </div>
            </div>
            <div class="form-div">
                <form class="form" id="reset">
                    <b class="text">目标地址</b><br>
                    <input name='address' type="text" placeholder="请输入邮箱地址" class="form-control text" id="address" />
                    <b class="text">邮件主题</b><br>
                    <input name='topic' type="text" placeholder="请输入邮件主题" class="form-control text" id="topic" />
                    <b class="text">邮件内容</b><br>
                    <textarea name='message' type="text" placeholder="请输入邮件内容" class="form-control text"
                        id="message"></textarea>
                    <label for="start"><b class="text">发送时间</b></label><br>
                    <input type="date" id="time_board" name="trip-start" value="2022-10-1" min="2020-10-20"
                        max="3000-12-31" class="time-board">
                    <input type="button" value="发送" class="send-button" onclick="sendto()">
                    <button type="button" class="reset-button" onclick="resetForm()">
                        <!-- 重置表单 -->
                        <img class="reset-button-img" src="./soures/images/reset.png">
                        <div style="font-size:20px;float:right">重置表单</div>
                    </button>
                </form>
            </div>
        </div>
    </div>
</body>

</html>